<template>
  <div class="h-full w-ful">
    <div class="show-json-editor" ref="showJsonEditor"></div>
    <div class="show-json-bar">
      <a-space>
        <a-button @click="close">取消</a-button>
        <a-button @click="reload" type="primary">确定</a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  onUnmounted,
  ref,
  onMounted,
  watch,
  defineProps,
  defineEmits,
} from "vue";
import { useConfig } from "@/stores/datav/useConfig";
import { IConfigStore } from "@/stores/datav/types";
let editor: {
  set: (data: object) => void;
  get: () => IConfigStore;
  destroy: () => void;
};
const props = defineProps<{ visible: boolean }>();
const emits = defineEmits(["close"]);
const config: IConfigStore = useConfig();
const showJsonEditor = ref<HTMLDivElement | null>(null);
onMounted(() => {
  if (showJsonEditor.value) {
    editor = new window.JSONEditor(showJsonEditor.value as HTMLDivElement, {
      mode: "code",
    });
    editor.set({
      canvasConfig: config.canvasConfig,
      config: config.config,
    });
  }
});
onUnmounted(() => {
  if (editor) {
    editor.destroy();
  }
});
const close = () => {
  emits("close");
};
const reload = () => {
  const json: IConfigStore = editor.get();
  config.config = json.config;
  config.canvasConfig = json.canvasConfig;
};
// watch(
//   () => props.visible,
//   () => {
//     console.log(config);
//     editor.set({
//       canvasConfig: config.canvasConfig,
//       config: config.config,
//     });
//   }
// );
</script>

<style lang="less" scoped>
.show-json-editor {
  height: calc(100% - 40px);
}
.show-json-bar {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
